﻿<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html> 
<head> 
	<title>電子行事曆</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="icon" href="favicon.ico" />
	<link rel="apple-touch-icon" href="favicon.png" />	
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
	<link rel="stylesheet" href="css/green.css" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
	<script type="text/javascript">
		
		Date.prototype.dateDiff = function(objDate){
			var dtEnd = new Date(objDate);
			if(isNaN(dtEnd)) return undefined;
			return parseInt((dtEnd - this) / 86400000);
		}
		
		function formatDate(jsonDate) {
			return jsonDate.substr(0,4) + "年" + jsonDate.substr(4,2) + "月" + jsonDate.substr(6,2) + "日";
		}
		
		function checkDate(jsonDate) {
			var c = 0;
			var d = new Date(jsonDate.substr(0,4)+"/"+jsonDate.substr(4,2)+"/"+jsonDate.substr(6,2));
			c = d.dateDiff(new Date());
			return c;
		}
		
		function loadHolidayList() {
			var groupname = "";
			
			$.mobile.showPageLoadingMsg();			
			$.getJSON("ajax/tc.json", function(data){
				//console.log("get json");
				// data:VCALENDAR
				var events = data.EVENTS;
				if (events) {
					$("#holiday-list").html("");
					// events:VEVENT
	        		$.each(events, function(i,event){
	        			// DTSTART, SUMMARY
	        			var dtstart = formatDate(event.DTSTART);
	        			var summary = event.SUMMARY;
	        			var grouptemplate = "";
	        			if (groupname != dtstart.substr(0,8)) {
	        				groupname = dtstart.substr(0,8);
	        				grouptemplate = "<li data-role=\"list-divider\">{MONTH}</li>";
	        				grouptemplate = grouptemplate.replace("{MONTH}",groupname);
	        			}
	        			var template = "<li data-icon=\"grid\"><a href=\"#\">{SUMMARY}<span class=\"ui-li-aside\">{DTSTART}</span></a></li>";
						template = template.replace("{DTSTART}",dtstart.substr(5,6));
						template = template.replace("{SUMMARY}",summary);
						if (checkDate(event.DTSTART) < 0) {
							$("#holiday-list").append(grouptemplate + template);
						}
	        			//console.log(i + ":" + event.DTSTART);
	            	});
	        		$("#holiday-list").listview("refresh");
				}
				$.mobile.hidePageLoadingMsg();
			});
		}

		$("#holiday").live("pageinit",function() {
			//console.log("pageinit");
			loadHolidayList();
		});
		
		
	</script>
</head> 
<body> 
<div data-role="page" id="main" data-dom-cache="true">

	<div data-role="header"  data-theme="g" data-fullscreen="true" data-position="fixed">
		<h1>香港公眾假期 2013</h1>
	</div>
	<div data-role="content" style="text-align:center">
		<div style="height:50px;">
		</div>
		<p>		
		<a href="#holiday">			
			<img src="image/calendar.png" />
			<br/><br/>
			>> 加入 iCal 日曆 <<
		</a>
		</p>
	</div>
	
	<jsp:include page="calendar-footer.jsp" flush="true" />

</div>

<div data-role="page" id="holiday" data-dom-cache="true">

	<div data-role="header"  data-theme="g" data-fullscreen="true" data-position="fixed">
		<a href="#main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>香港公眾假期 2013</h1>
		<a href="#subscribe" data-icon="star" data-rel="dialog">訂閱</a>
	</div>
	<div data-role="content">		
		<ul id="holiday-list" data-role="listview" data-inset="false" data-filter="false" data-theme="d" data-divider-theme="d">
		</ul>		
	</div>

	<jsp:include page="calendar-footer.jsp" flush="true" />

</div>

<div data-role="page" id="subscribe" data-dom-cache="true">

	<div data-role="header" data-theme="g" data-fullscreen="true" data-position="fixed">
		<a href="#main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>香港公眾假期 2013</h1>
		
	</div>
	
	<div data-role="content">	
		<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="d">
			<h3>訂閱 (iPhone 版本)</h3>		
			<a href="webcal://www.1823.gov.hk/common/ical/tc.ics" data-role="button" data-icon="plus">繁體中文</a>
			<a href="webcal://www.1823.gov.hk/common/ical/sc.ics" data-role="button" data-icon="plus">简体中文</a>
			<a href="webcal://www.1823.gov.hk/common/ical/en.ics" data-role="button" data-icon="plus">English</a>
		</div>
	</div>
	
	<jsp:include page="calendar-footer.jsp" flush="true" />
		
</div>

<div data-role="page" id="about" data-dom-cache="true">

	<div data-role="header" data-theme="g" data-fullscreen="true" data-position="fixed">
		<a href="#main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
		<h1>香港公眾假期 2013</h1>
		
	</div>
	
	<div data-role="content" style="font-size:11px">
		<p>
			<b>資料來源:</b>
			<br/> 
			<a href="http://www.1823.gov.hk/big5/blog/calendar.aspx" target="_blank">http://www.1823.gov.hk/big5/blog/calendar.aspx</a>
		</p>
		<p>	
			<b>連結:</b>
			<br/>	
			繁體中文<br/>
			<a href="http://www.1823.gov.hk/common/ical/tc.ics" target="_blank">http://www.1823.gov.hk/common/ical/tc.ics</a>
			<br/>
			简体中文<br/>
			<a href="http://www.1823.gov.hk/common/ical/sc.ics" target="_blank">http://www.1823.gov.hk/common/ical/sc.ics</a>
			<br/>
			English<br/>
			<a href="http://www.1823.gov.hk/common/ical/en.ics" target="_blank">http://www.1823.gov.hk/common/ical/en.ics</a>
		</p>
	</div>
	
	<jsp:include page="calendar-footer.jsp" flush="true" />
		
</div>

</body>
</html>